@(user:models.User, pref:models.User.Preferences, userPosts:Option[List[models.Post]])(implicit s:dao.Session)
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>REWIND | Perfil del usuario</title>
  
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  
  <script type="text/javascript" src="@asset("public/js/jquery-1.5.2.min.js")"></script>

  <script type="text/javascript" src="@asset("public/js/fancybox/jquery.fancybox-1.3.4.pack.js")"></script>
  <link rel="stylesheet" href="@asset("public/js/fancybox/jquery.fancybox-1.3.4.css")" type="text/css" media="screen" />

  <link rel="stylesheet" href="@asset("public/css/rewind.css")" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="@asset("public/themes/default/css/style.css")" type="text/css" media="screen" />
  <script type="text/javascript" src="@asset("public/js/common.js")"></script>
  <script type="text/javascript" src="@asset("public/js/degeocode.js")"></script>
  <script type="text/javascript" src="@asset("public/js/user_panel.js")"></script>
  
  <!-- videoJS -->
  <script src="@asset("public/video-js/video.js")" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="@asset("public/video-js/video-js.css")" type="text/css" media="screen" title="Video JS">
  

</head>
<body>
<div id="wrapper">

@views.Application.html.top(Some(user.name))

<!-- main panel -->
  <div id="content">
      <div id="rw-col-headers">
        <h3 id="head-rewinds">PUBLICACIONES</h3>
        <h3 id="head-messages">MENSAJES</h3>
        <h3 id="head-contacts">AUTORES FAVORITOS</h3>
        <h3 id="head-faves">FAVORITOS</h3>
      </div>

  <div id="user-rewinds" class="rw-col">
      <ul class="block">
       @if(userPosts.isDefined){
        @userPosts.get.map { p =>
          <li class="@p.id">@p.title</li>
        }
      } else {
        (no tiene mensajes)
      }
    </ul>
    </div>
    <div id="user-messages" class="rw-col">

      <ul class="block">
      @if(!user.messages.isEmpty){
        @user.messages.map { m =>
          <li class="@m.id">@m.title</li>
        }
      } else {
        (no ha recibido mensajes aún)
      }
    </ul>
  </div>
    <div id="user-contacts" class="rw-col">

      <ul class="block">
      @if(!user.friends.isEmpty){
        @user.friends.toList.map {f => <li class="@f.name">@f.fullname</li>}
      } else {
        (no sigue a ningún autor)
      }
    </ul>
    </div>

    <div id="user-faves" class="rw-col">
      <ul class="block">
      @if(!user.faves.isEmpty){
        @user.faves.toList.map {f => <li class="@f.id">@f.title</li>}
      } else {
        (no tiene publicaciones favoritas)
      }  
      </ul>
    </div>
    <div id="user-profile">
        <div id="profile-view">
          <div class="profile-action">
            <a href="#" id="edit-profile" class="link-button">Editar perfil</a>
          </div>
          <div id="profile-avatar-container" class="square-250">
            <img id="profile-avatar" src="@(config.Services.avatarsPath + user.photo)" width="250px" alt="user-picture"/>
          </div>
          <h2 id="profile-name">@user.fullname</h2>
        @if(user.det.isDefined){
        
          <div id="user-det">
            <h3>
            @if(user.age > 0){
              <span id="profile-age">@user.age</span> años / 
            }
              <span id="profile-nationality">@user.det.get.country</span>
            </h3>
            <dl>
              <dt>vivió en</dt>
              <dd id="profile-livedin">@user.det.get.livedIn</dd>
              <dt>experiencia en</dt>
              <dd id="profile-exp">@user.det.get.experience</dd>
              <dt>pasatiempos</dt>
              <dd id="profile-hobbies">@user.det.get.hobbies</dd>
            </dl>
            <dl>
              <dt>lugar que quiere conocer</dt>
              <dd id="profile-placetoknow">@user.det.get.toKnow</dd>
              <dt>lo mejor de la vida</dt>
              <dd id="profile-bestoflife">@user.det.get.bestInLife</dd>
            </dl>
          </div>
        } else {
        <p>
          <strong>Aún no ha completado su perfil.</strong>
          Para completarlo, presione el botón <em>Editar perfil</em>.
        </p> 
          <div id="user-det" style="display:none">
            <h3> <span id="profile-age"></span> años / <span id="profile-nationality"></span></h3>
            <dl>
              <dt>vivió en</dt><dd id="profile-livedin"></dd>
              <dt>experiencia en</dt><dd id="profile-exp"></dd>
              <dt>pasatiempos</dt><dd id="profile-hobbies"></dd>
            </dl>
            <dl>
              <dt>lugar que quiere conocer</dt><dd id="profile-placetoknow"></dd>
              <dt>lo mejor de la vida</dt><dd id="profile-bestoflife"></dd>
            </dl>
          </div>
        }
          
          
      </div><!-- /view -->
      <div id="profile-edit" style="display:none;">
      <div class="profile-action">
        <a href="#" id="view-profile" class="link-button link-button-glyph save-glyph">Guardar cambios</a><br /><br />
        <a href="#" id="cancel-edit-profile" class="link-button">Cancelar</a>
      </div>
          <div style="float:left; width:300px;position:relative;">
              <img id="profile-avatar-edit" src="@(config.Services.avatarsPath + user.photo)" width="260px" height="190px" alt="user-picture"/>
              <div id="edit-profile-image"><a href="#">Cambiar imagen</a></div>
          </div>
      <form id="profile-details" action="#">
          <div style="float:left;width:400px;">
              <label>Nombre</label><input type="text" name="fullname" id="profile-in-name" value="@user.fullname" />
              <label>Fecha de nacimiento</label>
              
              @views.Application.html.datepicker( user.det.map( _.birthday.getDate ).getOrElse(0), user.det.map( _.birthday.getMonth ).getOrElse(0), user.det.map( _.birthday.getYear ).getOrElse(0))
              
              <input type="hidden" name="det.birthday" id="profile-in-birthday" />
              <label>Nacionalidad</label>
              @views.Application.html.countries()
              <!-- <input type="text" name="det.country" id="profile-in-nationality" value="@user.det.map(_.country).getOrElse("")" /> -->
              <label>vivió en</label><input type="text" name ="det.livedIn" id="profile-in-livedin" value="@user.det.map(_.livedIn).getOrElse("")" />
          </div>
          <div style="float:left; width:300px;">
            <label>experiencia en</label><input type="text" name="det.experience" id="profile-in-exp" value="@user.det.map(_.experience).getOrElse("")" />
              <label>pasatiempos</label><input type="text" name="det.hobbies" id="profile-in-hobbies" value="@user.det.map(_.hobbies).getOrElse("")" />
            <label>lugar que quiere conocer</label><input type="text" name="det.toKnow" id="profile-in-placetoknow" value="@user.det.map(_.toKnow).getOrElse("")" />
            <label>lo mejor de la vida</label><input type="text" name="det.bestInLife" id="profile-in-bestoflife" value="@user.det.map(_.bestInLife).getOrElse("")" />
          </div>
          <input type="hidden" name="birthday" id="profile-in-age-utc" />
      </form>
      </div><!-- /edit -->
      
    </div><!-- profile -->
  </div><!-- /content -->
</div><!-- /wrapper -->
</body>
</html>
